<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件捕获</title>
        <style>
            .wrapper { 
                height: 50px; 
                background: #dfdfdf; 
                border: 1px solid blue; 
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
        <h1>事件捕获</h1>
        <div class="wrapper box"></div>
        <p>请在浏览器终端中查看运行结果</p>
        <a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">事件流</a>
        <script>
            (()=>{
                const type = 'click';
                const listener = function(event){
                    console.log( 'target: ', event.target );
                    console.log( 'current target: ', event.currentTarget );
                    console.log( 'event phase', event.eventPhase );
                }
                // 若capture为`true`则表示在事件"捕获"阶段执行监听器中的操作
                const capture = true;
                // 为整个窗口绑定点击事件监听器
                window.addEventListener(type, listener, capture);
                // 为整个文档绑定点击事件监听器
                document.addEventListener(type, listener, capture);

                const html = document.querySelector('html');
                // 为 html 绑定点击事件监听器
                html.addEventListener(type, listener, capture);

                const body = document.body;
                // 为 body 绑定点击事件监听器
                body.addEventListener(type, listener, capture);

                const box = document.querySelector('.wrapper.box');
                // 为 body 绑定点击事件监听器
                box.addEventListener(type, listener, capture);
            })();
        </script>
    </body>
</html>